<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>全国人口普查条例知识竞答</title>

    <link rel="stylesheet" href="http://censusqiniu.getpv.com/css/style.css?v=5.20">

    <style>
        .top_bg {
            height: 93px;
            background: url(http://censusqiniu.getpv.com/images/wenda_tit.jpg?v=5.20) center top no-repeat;
            background-size: cover;
            position: relative;
        }

        .top_bg .timu_num {
            position: absolute;
            right: 40px;
            bottom: -10px;
            font-size: 26px;
            font-weight: bold;
            color: #1a7dd0;
        }

        .timu_box {
            padding: 10px 20px;
        }

        .timu_box .timer_box {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
        }

        .timer_box .ico {
            width: 22px;
            height: 25px;
        }

        .timer_box .jindu {
            height: 10px;
            width: 100px;
            background: url(http://censusqiniu.getpv.com/images/jindu_bg.jpg) left center no-repeat;
            background-size: contain;
            margin-left: 10px;
            border-radius: 5px;
            overflow: hidden;
        }

        .jindu .jindu_value {
            height: 10px;
            background-color: #0097c3;
            border-radius: 5px;
        }

        .timu_box .timu_con {
            padding: 15px 0;
        }

        .timu_con .tit {
            font-size: 20px;
            font-weight: bold;
            margin: 15px 0 30px 0;
            color: #183460;
            text-align: justify;
        }

        .timu_con .timu_options {
            font-size: 16px;
            font-weight: bold;
            display: flex;
            flex-flow: row wrap;
        }

        .timu_options .item {
            min-width: 100%;
            margin-bottom: 10px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
        }

        .timu_options .item a {
            display: block;
            text-align: center;
            font-size: 30px;
            color: #888;
            border: #888 2px solid;
            width: 32px;
            height: 36px;
            line-height: 36px;
            margin-right: 10px;
            flex-shrink: 0;
            border-radius: 6px;
        }

        .timu_options .item.active a {
            color: #1a7dd0;
            border-color: #1a7dd0;
        }

        .timu_con .action {
            margin-top: 15px;
            text-align: center;
        }

        .timu_con .action a {
            width: 120px;
            height: 40px;
            display: inline-block;
        }

        .daan {
            visibility: hidden;
        }

        .daan-box {
            width: 80vw;
            background-color: #5db8e9;
            padding: 15px;
            color: #193766;
            border-radius: 10px;

        }

        .daan-box .zqda {
            height: 60px;
            line-height: 60px;
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            border-bottom: #fff 1px solid;
            font-weight: bold;
        }

        .daan-box .jiedu {
            display: flex;
            flex-flow: column nowrap;
        }

        .daan-box .jiedu .tit {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            padding: 10px 0;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
        }

        .daan-box .jiedu .tit .ico {
            width: 45px;
            height: 30px;
            margin-right: 10px;
        }

        .daan-box .jiedu .con {
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            text-align: justify;
            line-height: 22px;
        }

        .daan-box .tip {
            margin-top: 10px;
            color: #fff;
            font-size: 18px;
            text-align: center;
        }

        .daan-box .good {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            padding: 5px 0;
            text-align: center;
            padding-left: 10px;
            box-sizing: border-box;
        }

        .manfen,
        .wmanfen {
            visibility: hidden;
        }

        .manfen-box,
        .wmanfen-box {
            width: 200px;
            padding: 30px;
            border-radius: 10px;
            padding-bottom: 0;
            font-size: 0;
        }

        .manfen-box {
            background-color: #fcb885;
        }

        .wmanfen-box {
            background-color: #65d4be;
            position: relative;
        }

        .wmanfen-box .close {
            position: absolute;

            bottom: -60px;
            width: 116px;
            left: 50%;
            margin-left: -58px;
        }

        .chouj-box {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .chouj-box a {
            width: 90px;
            display: block;
            margin-top: 20px;
        }

        .chouj-box input {
            height: 30px;
            line-height: 30px;
            padding: 0 5px;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
 


    <div id="app" v-cloak>
        <div class="box">
            <div class="top_bg">
                <div class="timu_num a-font">{{ k+1 }} / {{ timu_list.data.length }}</div>
            </div>

            <div class="timu_box">
                <div class="timer_box">
                    <div class="ico"><img src="http://censusqiniu.getpv.com/images/timer-ico.jpg" alt="" srcset=""></div>
                    <div class="jindu">
                        <div class="jindu_value" :style="'width: '+ (timeJindu/60)*100 +'%;'"></div>
                    </div>
                </div>

                <!-- 答案较长 -->
                <div class="timu_con">
                    <div class="timu_img"><img :src="timu_now.img" alt=""></div>
                    <div class="tit">{{ timu_now.title }}</div>
                    <div class="timu_options">
                        <div class="item" :class="[item.xuhao === selid ? 'active' : '' ]"
                            v-for="item in timu_now.options" v-bind:key="item.xuhao" @click="sel(item.xuhao)">
                            <a class="a-font">{{ item.xuhao | xuanxiang }}</a>
                            <p>{{ item.name }}</p>
                        </div>
                    </div>
                    <div class="action">
                        <a href="javascript:;" @click="qr"><img src="http://censusqiniu.getpv.com/images/qr_btn.jpg" alt="" srcset=""></a>
                    </div>
                </div>

                <!-- 答案较短 -->
                <!-- <div class="timu_con" style="display: none;">
                    <div class="timu_img"><img src="http://censusqiniu.getpv.com/images/timu_img01.jpg" alt=""></div>
                    <div class="tit">《全国人口普查条例》自___起施行。</div>
                    <div class="timu_options">
                        <div class="item"><a>A</a>
                            <p>2010年6月1日</p>
                        </div>
                        <div class="item"><a>B</a>
                            <p>2010年2月1日</p>
                        </div>
                        <div class="item"><a>C</a>
                            <p>2010年5月1日</p>
                        </div>
                        <div class="item active"><a>D</a>
                            <p>2000年6月1日</p>
                        </div>
                    </div>
                    <div class="action"><a href="javascript:;"><img src="http://censusqiniu.getpv.com/images/qr_btn.jpg" alt="" srcset=""></a></div>
                </div> -->
            </div>
        </div>

        <!-- 答案解读 -->
        <div class="modal-box daan" id="daan-con" :style="{visibility:jiedu ? 'visible' : 'hidden'}" @click="next">
            <div class="daan-box">
                <div class="good" v-if="isGood">太棒了！您答对了！</div>
                <div class="good" v-if="!isGood">对不起，您答错了！</div>
                <div class="zqda">正确答案 <span> {{ timu_now.zhengque_xuhao | xuanxiang }}</span></div>
                <div class="jiedu">
                    <div class="tit"><span class="ico"><img src="http://censusqiniu.getpv.com/images/daan_jd_ico.jpg" alt=""
                                srcset=""></span><span>答案解读</span></div>
                    <div class="con">{{ timu_now.jiedu }}</div>
                </div>
                <div class="tip">单击屏幕继续下一题</div>
            </div>
        </div>

        <!-- 满分 -->
        <div class="modal-box manfen" :style="{visibility:manfen ? 'visible' : 'hidden'}">
            <div class="manfen-box" v-if="!localPhone">
                <img src="http://censusqiniu.getpv.com/images/good-img-top.png" alt="">
                <div class="chouj-box">
                    <input type="text" placeholder="手机号码" v-model="choujPhone">
                    <a href="javascript:;" @click="choujiang"><img src="http://censusqiniu.getpv.com/images/chouj.png" alt=""></a>
                </div>
                <img src="http://censusqiniu.getpv.com/images/good-img-bot.png" alt="">
            </div>
            <div class="manfen-box" v-else>
                <img src="http://censusqiniu.getpv.com/images/good_img.jpg" alt="" srcset="" @click="choujiang">
            </div>
        </div>

        <!-- 未满分 -->
        <div class="modal-box wmanfen" :style="{visibility:wmanfen ? 'visible' : 'hidden'}">
            <div class="wmanfen-box">
                <img src="http://censusqiniu.getpv.com/images/yihan_img.jpg" alt="" @click="re">

                <div class="close" @click="closeWindow">
                    <img src="http://censusqiniu.getpv.com/images/close_btn.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <style>
        .layui-m-layerbtn {
            display: box;
            display: -moz-box;
            display: -webkit-box;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 0;
            border-top: 1px solid #D0D0D0;
            background-color: #F2F2F2;
        }

        .layui-m-layercont {
            padding: 26px 10px;
            line-height: 22px;
            text-align: center;
        }

        .layui-m-layer0 .layui-m-layerchild {
            width: 70%;
            max-width: 640px;
        }
    </style>

    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="layer_mobile/layer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"
        integrity="sha256-NSuqgY2hCZJUN6hDMFfdxvkexI7+iLxXQbL540RQ/c4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/store.js/1.3.20/store.min.js"
        integrity="sha256-0jgHNEQo7sIScbcI/Pc5GYJ+VosKM1mJ+fI0iuQ1a9E=" crossorigin="anonymous"></script>
    <script src="demo.js"></script>
    <script>
        $(function () {
            // layer.open({
            //     content: 'hello<br />hi~',
            //     btn: ['确定']
            // })

             //如果是直接分享了这个地址，进来后跳转到首页
            let reffer = document.referrer
            if(!reffer){
                location.href="/?v="+Math.random()
            }

        })

        // VUE
        var vue = new Vue({
            el: '#app',
            data: function () {
                return {
                    timu_list: {
                        data: []
                    },
                    timu_now: {},
                    k: 0,
                    yida: 0,
                    score: 0,
                    manfen: false,
                    wmanfen: false,
                    selid: '',
                    jiedu: false,
                    timeEr: null,
                    timeJindu: 0,
                    isGood: false,
                    choujPhone: '',
                    localPhone: ''
                }
            },
            created: function () {
                let _self = this
                $.ajax({
                    type: "get",
                    url: 'http://census.getpv.com/api/index/question',
                    success: function (res) {
                        console.log("===>", res)
                        var data = {
                            code: 0,
                            data: [],
                            msg: "success"
                        }
                        data.data = res
                        _self.timu_list = data

                        _self.setTimu()
                        _self.timeOut()
                    }
                })

                // 获取存储的手机号
                var ymd = this.getYmd()
                var localPhone = store.get('localPhone_' + ymd)
                console.log('localPhone_' + ymd + ' ===>', localPhone)
                if (!!localPhone) {
                    this.localPhone = localPhone
                }

                this.choujPhone = this.localPhone

                // this.timu_list = demo_data

                // this.setTimu()
                // this.timeOut()
            },
            methods: {
                // 统计
                tongji: function () {
                    var _data = {}
                    var _url = 'http://census.getpv.com/api/index/dati'

                    _data.score = this.score

                    $.ajax({
                        type: "post",
                        url: _url,
                        data: _data,
                        success: function (res) {
                            console.log("count ===>", res)
                        }
                    })
                },
                closeWindow: function () {
                    try {
                        document.addEventListener('WeixinJSBridgeReady', function () { WeixinJSBridge.call('closeWindow'); }, false)
                        WeixinJSBridge.call('closeWindow')
                        window.location.href = "about:blank"
                        window.close()
                    } catch (error) {

                    }
                },
                // 计时
                timeOut: function () {
                    var _self = this
                    this.timeJindu = 0

                    this.timeEr = setInterval(function () {
                        _self.timeJindu++

                        // console.log(_self.timeJindu)
                        if (_self.timeJindu >= 60) {
                            clearInterval(_self.timeEr)
                            _self.qr()
                        }
                    }, 1000)
                },
                next: function () {
                    this.jiedu = false
                    this.selid = ''
                    clearInterval(this.timeEr)

                    // 答题计数
                    if (this.k > 9) {
                        return
                    }

                    this.k++;
                    this.yida++;

                    this.setTimu()
                    this.timeOut()
                },
                setTimu: function () {
                    var k = this.k
                    console.log(k)

                    // 答题计数
                    if (this.k > 9) {
                        // alert(this.score)
                        // 计算是否满分
                        if (this.score >= 100) {
                            this.manfen = true
                        } else {
                            this.wmanfen = true
                        }

                        // 统计
                        this.tongji()

                        console.log("===>", this.wmanfen)
                        return
                    }

                    var timu_now = this.timu_list.data[k]

                    timu_now.options.sort(function (a, b) {
                        return a.xuhao - b.xuhao
                    })

                    this.timu_now = timu_now
                },
                qr: function () {
                    //播放音效
                    play_ok_music()

                    this.isGood = false
                    clearInterval(this.timeEr)

                    // 答题计数
                    if (this.k > 9) {
                        return
                    }

                    if (this.selid == this.timu_now.zhengque_xuhao) {
                        // if (true) {
                        // 正确，计分
                        this.score += 10
                        this.isGood = true

                        console.log("score ===>", this.score)
                    }

                    // 显示答案解读
                    this.jiedu = true
                },
                sel: function (id) {
                    this.selid = id
                },
                re: function () {
                    location.reload()
                },
                getYmd: function () {
                    var d = new Date()
                    var y = d.getFullYear()
                    var m = d.getMonth() + 1
                    var day = d.getDate()

                    return y + '' + m + '' + day
                },
                choujiang: function () {
                    var _self = this

                    if (!!_self.localPhone) {
                        this.choujPhone = this.localPhone
                    }

                    var phone = this.choujPhone

                    // location.href = './jieguo.html' // 进入抽奖页面

                    $.ajax({
                        type: "get",
                        url: 'http://census.getpv.com/api/index/choujiang',
                        data: {
                            mobile: phone
                        },
                        success: function (res) {
                            
                            // 缓存手机号

                            // var expiration = (new Date(y + '/' + m + '/' + day + ' 23:59:59')).getTime()
                            // var expiration = new Date().getTime() + 10000
                            var ymd = _self.getYmd()
                            store.set('localPhone_' + ymd, phone)

                            console.log("===>", res)
                            if (res.hasOwnProperty('choujiang_ma')) {
                                _self.choujiang_ma = res.choujiang_ma
                                _self.is_zhongj = 'z'

                                location.href = './jieguo.html?choujiang_ma=' + res.choujiang_ma + '&phone=' + phone // 进入抽奖页面
                                // layer.open({
                                //     content: res.msg,
                                //     btn: '确定',
                                //     yes: function () {
                                //         location.href = './jieguo.html?choujiang_ma=' + res.choujiang_ma + '&phone=' + phone // 进入抽奖页面
                                //     }
                                // })
                                return
                            } else {
                                if (res.code == -10) {
                                    location.href = './jieguo.html'
                                }else if (res.code == -2) {
                                    //手机号格式不正确
                                    let index=layer.open({
                                        content: res.msg,
                                        btn: '确定',
                                        yes: function () {
                                            layer.close(index);
                                        } 
                                    })
                                }  else { 
                                    store.set('localPhone_' + ymd, '')                        

                                    let index=layer.open({
                                        content: res.msg,
                                        btn: '确定',
                                        yes: function () {
                                            layer.close(index)
                                            // location.href = './jieguo.html'
                                            _self.closeWindow()
                                        } 
                                    })
                                }
                            }
                        }
                    })
                }
            },
            filters: {
                xuanxiang: function (xuhao) {
                    xuhao = parseInt(xuhao)
                    switch (xuhao) {
                        case 1:
                            return 'A'
                            break;
                        case 2:
                            return 'B'
                            break;
                        case 3:
                            return 'C'
                            break;
                        case 4:
                            return 'D'
                            break;
                        default:
                            break;
                    }
                }
            }
        })
    </script>

    <!-- 点击确定音效 -->
    <!--  android autoplay属性的设置就会自动播放该音乐  -->
    <audio id="ok-music" preload src='http://censusqiniu.getpv.com/music/ok.wav'></audio>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

    <script>

        function play_ok_music() {
            let okmusic = document.getElementById("ok-music")
            okmusic.play();
        }
    </script>


    <div style="display:none">
        <script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1278924793&web_id=1278924793"></script>
    </div>


    

<script>
    $(function(){
        $.ajax({
            url: 'http://census.getpv.com/api/wechat/shareSign',
            type: 'POST',
            async: true,
            data: {url: location.href.split('#')[0]},
            dataType: 'json',
            cache: false,
            success: function (data) {
                wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data['appid'], // 必填，公众号的唯一标识
                timestamp: data['timestamp'], // 必填，生成签名的时间戳
                nonceStr: data['noncestr'], // 必填，生成签名的随机串
                signature: data['signature'],// 必填，签名
                jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表
                });
            
            
                wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            
                    wx.checkJsApi({
                        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                        success: function (res) {
                        // 以键值对的形式返回，可用的api值true，不可用为false
                        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                        // alert(JSON.stringify(res));
                        }
                    });
                
                
                
                
                
                    //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
                    // wx.updateAppMessageShareData({ 
                    //   title:  data.title, // 分享标题
                    //   desc:  data.desc, // 分享描述
                    //   link:  data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    //   imgUrl:  data.imgUrl, // 分享图标
                    //   success: function () {
                    //     // 设置成功
                    //   }
                    // })
                
                    let shareData={
                        title:data.title,
                        desc:data.desc,
                        link:data.link,
                        imgUrl:data.imgUrl,
                    }
                
                    wx.updateAppMessageShareData(shareData, function (res) {
                //这里是回调函数
                    });
                
                    wx.updateTimelineShareData(shareData, function (res) {
                //这里是回调函数
                    });
                
                    wx.onMenuShareAppMessage(shareData, function (res) {
                //这里是回调函数
                    });
                
                    wx.onMenuShareTimeline(shareData, function (res) {
                //这里是回调函数
                    });
                    wx.onMenuShareQQ(shareData, function (res) {
                //这里是回调函数
                    });
                    wx.onMenuShareWeibo(shareData, function (res) {
                //这里是回调函数
                    });
                    wx.onMenuShareQZone(shareData, function (res) {
                //这里是回调函数
                    });
                
            
            
            
                });
            
            }
            });
            
    })
    
    
    </script>

</body>

</html>